<template>
<!-- 搜索弹出层--第3个界面--产品列表页 -->
  <div>
    <van-dropdown-menu>
      <!-- v-model="value1"确定勾选哪一个的 
        options  确定有哪些选项的
       -->
      <van-dropdown-item v-model="value1" :options="option1" title="综合" disabled/>
      <van-dropdown-item v-model="value1" :options="option1" title="价格"  @change="priceChange"/>
      <van-dropdown-item v-model="value2" :options="filterCategory" title="分类" @change="categoryChange" />
    </van-dropdown-menu>

    <!-- 如果没有产品，Products就不展示 ，而要展示Empty组件-->
    <van-empty v-if="productsListData.length==0" description="对不起，没有这些商品" />
    <Products v-else :productsListData="productsListData"/>

  </div>
</template>

<script>
import Products from "../Products"
export default {
  props:["productsListData", "filterCategory"],
  components:{
    Products
  },
  methods:{
    categoryChange(value){

      // console.log("选中了", value);

      this.$emit("categoryChange",value) // 其实value就是分类id
    },
    priceChange(value){
      // console.log(value);
      this.$emit("priceChange",value)
    }
  },
  // 需求：正确地勾上分类中的某一项：要把value2做活了。value2的值必须为filterCategory这个数组中checked为true的这一项
  beforeUpdate(){
      // 遍历filterCategory中的每一项,把checked为真的这一项的value值，给到this.value2
      // filterCategory为:
      // [
      //   { text: '全部', value: 0 ,checked: true},
      //   { text: '居家', value: 102000 ,checked: false},
      // ]
      this.filterCategory.map(item=>{
        if(item.checked){
          this.value2 = item.value
        }
      })
      // this.value2 = 
  },
  data () {
    return {
      value1: "",
      value2: 1010000,
      option1: [
        { text: '价格由高到低', value: "desc" },
        { text: '价格由低到高', value: "asc" },
      ],
      // option2: [
      //   { text: '全部', value: 'a' },
      //   { text: '居家', value: 'b' },
      // ],
 
    }
  }
}
</script>
 
<style lang = "less" scoped>
  
</style>